<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>slot使用</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<navbar>
				<button @click="isShow=!isShow">点击</button>
			</navbar>
			<sidebar v-show="isShow"></sidebar>
		</div>
		<script>
			Vue.component("navbar",{
				template:`
					<div style="background:skyblue">
						导航栏-<slot></slot>
					</div>
				`,
			})
			Vue.component("sidebar",{
				template:`
					<div>
						<ul style="width:100px;backgorund:#ccc;">
							<li>1</li>
							<li>2</li>
							<li>3</li>
						</ul>
					</div>
				`,
			})
			
			const vm = new Vue({
				el:"#app",
				data:{
					isShow:false
				}
			})
		</script>
	</body>
</html>
